<template>
    <div class='top'>
        <div style="" class="df jc-sb">
            <h4>{{ headerText }}</h4>
            <el-input suffix-icon="el-icon-search" placeholder="搜索表单" style="" v-model="inputVal"
                @keydown.enter.native="input13"></el-input>
        </div>
        <div class="df jc-sb timeFilter">
            <div style="color: #39f;">快捷筛选</div>
            <ul class="df uu">
                <div>时间筛选:</div>
                <li v-for="(item, index) in fastFilter" :key="index"
                    :class="time_filter_flag == index ? 'timeFilterColor' : ''" @click="time_filter_click(index)">
                    {{ item.name }}
                </li>
            </ul>
        </div>

        <ul class="all df">
            <li v-for="(item, index) in allFilter" :key="index" class="d-center"
                :class="all_flag == index ? 'all-flag' : ''" @click="allClick(index)">{{ item.name }}（{{ item.num }}）
            </li>
        </ul>
    </div>
</template>

<script>


export default {
    props: ['time_filter_flag', 'all_flag', 'headerText'],
    name: '',
    components: {},
    data() {
        return {
            fastFilter: [
                {
                    //快捷筛选
                    name: "最近三天",
                },
                {
                    name: "最近一周",
                },
                {
                    name: "所有表单",
                },
            ],
            // time_filter_flag: 0,//时间筛选切换
            allFilter: [{
                name: "全部",
                num: 20
            }, {
                name: "财务部",
                num: 21
            }, {
                name: "人事部",
                num: 22
            }, {
                name: "行政部",
                num: 23
            }],
            inputVal: ""
        }
    },
    created() {
        console.log(this.time_filter_flag)
    },
    mounted() { },
    methods: {
        time_filter_click(index) {
            this.$emit('time_filter_click', index)
        },
        allClick(index) {
            this.$emit('allClick', index)
        },
        input13() {
            console.log(111)
            this.$message({
                type: 'error', // success error warning
                message: '没有搜索到内容',
                duration: 2000,
            })

        }

    }
}
</script>
<style scoped lang='scss'>
.top {
    height: 150px;

    h4 {
        font-weight: 600;
    }

    .el-input {
        border-radius: 50px;
        width: 380px;
        height: 50px;
    }

    ::v-deep .el-input__inner {
        border-radius: 50px !important;
    }

    ::v-deep .el-input__icon {
        height: 0;
    }

    .timeFilter {
        padding: 0 30px;
        font-size: 14px;

        .uu {
            >div {
                padding: 3px 8px;
            }

            li {
                padding: 3px 8px;
                background-color: #fff;
                margin-left: 10px;
                box-shadow: 0 0 5px 0 #ccc;
                cursor: pointer;
            }

            .timeFilterColor {
                background-color: #3c6cfe;
                color: #fff;
            }

        }


    }

    .all {
        font-size: 14px;

        li {
            padding: 5px 10px;
            box-shadow: 0 0 5px 0 #ccc;
            margin-left: 30px;
            cursor: pointer;
        }

        .all-flag {
            color: #39f;
        }
    }
}
</style>
